import VideoConfig from './videoConfig';
import { useRef, useState } from 'react';
import ResultList from './resultList';
import Styles from './index.module.scss';
import History from '../textToVideo/History';
import VideoHistory from '../../common/videoHistory';

export default function ImageToVideo() {

  // 创建refs数组来引用每个resultsItem和results容器
  const resultsItemRefs = useRef([]);
  const resultsContainerRef = useRef(null);
  // 将videoHistoryList状态提升到父组件
  const [videoHistoryList, setVideoHistoryList] = useState([]);

  // 点击history图片时滚动到对应的resultsItem
  const handleHistoryImageClick = index => {
    if (resultsItemRefs.current[index] && resultsContainerRef.current) {
      const resultsContainer = resultsContainerRef.current;
      const targetItem = resultsItemRefs.current[index];

      // 计算目标元素相对于容器的位置
      const containerRect = resultsContainer.getBoundingClientRect();
      const targetRect = targetItem.getBoundingClientRect();
      const scrollTop = resultsContainer.scrollTop;

      // 计算需要滚动的距离
      const targetScrollTop = scrollTop + (targetRect.top - containerRect.top);

      // 平滑滚动到目标位置
      resultsContainer.scrollTo({
        top: targetScrollTop,
        behavior: 'smooth',
      });
    }
  };

  return (
    <div className={Styles.layout}>
      <VideoConfig currentMenuTitle="视频参数" currentMenuKey={'imageToVideo'} />
      {/* <ResultList
        currentMenuTitle={'图生视频'}
        resultsItemRefs={resultsItemRefs}
        ref={resultsContainerRef}
      /> */}
      <VideoHistory
        ref={resultsContainerRef}
        resultsItemRefs={resultsItemRefs}
        currentMenuTitle={'图生视频'}
        passVideoHistoryList={setVideoHistoryList}
        operType="imgToVideo"
        additionalFields={{
          referImages: 'referImages',
        }}
      />
      <History onHistoryImageClick={handleHistoryImageClick} videoHistoryList={videoHistoryList} />
    </div>
  );
}
